<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .title {
            line-height: 40px;
        }

        .list {
            margin-top: 20px;
        }

        .list li {
            height: 32px;
            line-height: 32px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <button class="add">新增</button>
        <button class="del">删除</button>
        <ul class="list one">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>
</body>
<script>

    // 获取元素的方法

    // 传统获取元素方法
    // document.getElementById()
    // document.getElementsByClassName()
    // document.getElementsByTagName()
    // document.getElementsByName()

    // parent.getElementsByClassName()
    // parent.getElementsByTagName()

    // querySelectorAll
    // document.querySelectorAll()

    // 传统获取元素方法和querySelectorAll的区别
    // 1.传统获取元素方法 会随着页面同类型(tagName) 同类名(class) 同name属性的元素增加或减少 自动更细集合 => 可以理解为集合中的元素会和页面保持一直

    // 2. document.querySelectorAll() 已经获取就定死了  增加或删除元素 不会对集合有任何影响
    
    // list >li 
    var list = document.getElementsByClassName("list")[0];
    var liList = list.getElementsByTagName("li");
    var liItems = document.querySelectorAll(".list li");
    console.log("liList", liList);
    console.log("liItems", liItems);


    var list = document.querySelector(".list");
    var add = document.querySelector(".add");
    var del = document.querySelector(".del");

    add.onclick = function () {
        // 创建元素节点
        var li = document.createElement("li");
        li.innerText = "我是新增的li";
        li.setAttribute("class", "newLi");
        li.style.backgroundColor = "red";
        li.onclick = function () {
            console.log(this.innerText);// this -> 绑定事件的元素 -> 新增的li
        }
        list.append(li);

        console.log("liList", liList);
        console.log("liItems", liItems);
    }

    del.onclick = function () {
        var last = list.lastElementChild;
        last.remove();

        console.log("liList", liList);
        console.log("liItems", liItems);
    }



</script>

</html>